function create(color, left, top) {
    var element = document.createElement('i');
    element.classList.add('heart');
    element.style.backgroundColor = color;
    element.style.left = left + 'px';
    element.style.top = top + 'px';

    return element;
}

function move(element) {
    var count = 0,
        transform = element.style.transform || 'rotate(45deg)',
        translateX = 0,
        translateY = 0,
        scale = 1,
        t = setInterval(function () {
            if (count++ < 20) {
                translateX -= 2;
                translateY -= 2;
                scale += 0.01;
                element.style.transform = `${transform} translate(${translateX}px,${translateY}px) scale(${scale})`;
            } else {
                clearInterval(t);
                element.remove();
            }
        }, 50);
}


document.addEventListener('click', function (e) {
    var element = create('#0f0', e.x, e.y);

    document.body.appendChild(element);
    move(element);
});